<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
	<link rel="stylesheet" href="/web/css/reset.css">
	<link rel="stylesheet" href="/web/css/head.css" />

	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="/web/css/news.css">
	<link rel="stylesheet" href="/web/css/help.css">
	<title>帮助与支持</title>
</head>

<body>
	<div id="app">
		<!-- 导航 -->
		<header class="header">
			<div class="container clearfix">
				<div class="fl left">
					<a href="javascript:void(0)"><img src="/web/images/logo.png" alt="" class="img1" /></a>
				</div>
				<div class="fr nav">
					<ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">
						<li>
							<a href="/index.html">首页</a>
						</li>
						<li class="dropdown">
							<a href="/pro.html">
								产品服务
							</a>
						</li>
						<li class="dropdown">
							<a href="/science.html">普联科技</a>
						</li>
						<li>
							<a href="/news.html">新闻动态</a>
						</li>
						<li class="header-active">
							<a href="/help.html">帮助与支持</a>
						</li>
						<li>
							<a href="/about.html">关于我们</a>
						</li>
					</ul>
				</div>
				<a href="javascript:void(0)" id="navToggle">
					<span></span>
				</a>
			</div>
		</header>
		<div class="banner">
			<img src="/web/images/help/help-bgc_03.png" alt="">
		</div>


		<!-- 内容  -->
		<div class="content-wrapper">
			<div class="news-container">
				<div class="news-left">
					<ul>
						<li class="news-title-li" :class="{ 'active': isActive == 1 }" @click="clickTab(1)">
							<div class="gang"></div>
							<div class="left-title">蛮有财</div>
							<p><i class="right"></i></p>
						</li>
						<li class="news-title-li" :class="{ 'active': isActive == 2  }" @click="clickTab(2)">
							<div class=" gang"></div>
							<div class="left-title">0税宝</div>
							<p><i class="right"></i></p>
						</li>
						<li class="news-title-li" :class="{ 'active': isActive == 3 }" @click="clickTab(3)">
							<div class=" gang"></div>
							<div class="left-title cked">出口E贷</div>
							<p><i class="right"></i></p>
						</li>
						<li class="news-title-li" :class="{ 'active': isActive == 4 }" @click="clickTab(4)">
							<div class=" gang"></div>
							<div class="left-title wmfwpt">外贸服务平台</div>
							<p><i class="right"></i></p>
						</li>
					</ul>
				</div>
				<div class="news-right">
					<div class="r-world">
						<h4>{{tabTitle}}</h4>
						<div class="r-gang"></div>
						<ul class="help-content-ul">
							<li v-for="(item,index) in table.tableData" :key="index" class="help-li">
								<div class="q-div aq-div">
									<div class="icon-div"><span>问</span></div>
									<div class="help-content-box">{{item.q}}</div>
								</div>
								<div class="a-div aq-div">
									<div class="icon-div"><span>答</span></div>
									<div class="help-content-box" v-html='item.a'></div>
								</div>
							</li>
						</ul>
						<el-pagination class='page help-page' background @current-change="currentChangeHandle"
							:current-page="table.currentPage" :page-size="table.pageSize" layout="prev, pager, next,jumper"
							:total="table.rowCount"></el-pagination>
					</div>
				</div>
			</div>
		</div>


    <div class="common-footer">
      <div class="footer_lxwm">
        <ul class="wbsx">
          <li><img src="/web/images/sy/footer_wb.png">
            <p>企业微博</p>
          </li>
          <li><img src="/web/images/sy/footer_gzh.png">
            <p>企业公众号</p>
          </li>
          <li><img src="/web/images/sy/footer_dy.png">
            <p>抖音二维码</p>
          </li>
        </ul>
        <a href="javascript:void(0);"><img src="/web/images/sy/footer_bt.png"></a>

      </div>
      <div class="lxfs_box">
        <span class="sb_1"><img src="/web/images/sy/footer_icon_dianhua.png">电话：4000-365-108</span>
        <span class="sb_1"><img src="/web/images/sy/footer_icon_mail.png">邮箱：business@puldw.com</span>
        <span class="sb_1"><img src="/web/images/sy/footer_icon_dizhi.png">地址：武汉市江汉经济开发区江兴路17号A栋3楼02号(中信大楼)</span>
        <p><img src="/web/images/sy/footer_icon_banquan.png">版权所有 2018-2020 武汉普联东文数据服务有限责任公司 · 鄂ICP备17023599号-2</p>

      </div>
    </div>
	</div>
</body>
<script src="/web/js/jquery.min.js"></script>
<script src="/web/js/news.js"></script>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			table: {
				tableData: [],
				currentPage: 1,
				pageSize: 5,
				rowCount: 0
			},
			isActive: 1,
			tabTitle: ""
		},
		mounted() {
			this.getTableData()
		},
		methods: {

		    clickTab(value){
		        this.isActive = value;
		        this.table.currentPage = 1;
		        this.getTableData();
 		    },

			//翻页
			currentChangeHandle(currentPage) {
				this.table.currentPage = currentPage;
				console.log(currentPage);
				this.getTableData();
			},
			getTableData() {
				let p = {};
				let _url = '/webApi/helpList';
				p.start = (this.table.currentPage - 1) * this.table.pageSize;
				p.num = this.table.pageSize;
				p.helpType = this.isActive;
				var that = this;
				console.log(p);
				$.ajax({
				    type: 'POST',
				    url: _url,
				    data: p,
				    success: function (res) {
				    	console.log(res);
				    	for(i=0;i<res.data.rows.length;i++){
				    	    let cc = res.data.rows[i].a;
				    	    cc = cc.replace(/\r\n/g, '<br/>'); //IE9、FF、chrome
                            cc = cc.replace(/\n/g, '<br/>'); //IE7-8
                            cc = cc.replace(/\s/g, ' '); //空格处理
                            res.data.rows[i].a = cc;
				    	}

				    	that.table.tableData = res.data.rows;
				    	that.table.rowCount = res.data.total;
				    	console.log(that.table.tableData);
				    }
				});
			}
		},
		watch: {
			// tab切换方法写在这里。
			//  4个列表 分别对应的 val是 1 -4
			isActive: {
				handler: function (val, oVal) {
					switch (val) {
						case 1:
							this.tabTitle = "蛮有财"
							break;
						case 2:
							this.tabTitle = "0税宝"
							break;
						case 3:
							this.tabTitle = "出口E贷"
							break;
						case 4:
							this.tabTitle = "外贸服务平台"
							break;
					}
				},
				immediate: true

			}
		}
	})
</script>

</html>
